<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			html{
				height: 100%;
			}
			
			body{
				height: 100%;
			}
			
			.dot{
				width: 50px;
				height: 50px;
				background-color: greenyellow;
				border-radius: 50%;
				position: absolute;
			}
			#box{
				width: 100px;
				height: 100px;
				background-color: hsl(90,50%,50%);
				border-radius: 50%;
				position: absolute;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<button onclick="move()">动画</button>
		
		<div id="box">
			
		</div>
		
		<div class="dot"></div>
		<div class="dot"></div>
		<div class="dot"></div>
		<div class="dot"></div>
		<div class="dot"></div>
		<div class="dot"></div>
		
		
		
	</body>
	
	<script>
		var box = document.getElementById("box");
		
//		function move(){
//			var l = 0;
//			var timer = setInterval(function(){
//				l+=1;
//				box.style.left = l+"px";
//				
//				if(l>=200){
//					clearInterval(timer);
//				}
//			},17);
//		}
		
		
		//requestAnimationFrame，在下一次浏览器帧刷新时执行某个
		//函数，常用于执行动画。
		
//		function move(){
//			var l = 0;
//			function ani(){
//				l+=5;
//				box.style.left = l+"px";
//				timer = requestAnimationFrame(ani);
//				
//				if(l>=200){
//					cancelAnimationFrame(timer);
//				}
//			}
//			var timer = requestAnimationFrame(ani);
//		}
		
		
		//-----------------------------------------------
		
		
//		var x1 = window.document.documentElement.clientWidth/2;
//		var y1 = window.document.documentElement.clientHeight/2;
//		var r = 150;
//		
//		function move(){
//			var angle = 0;
//			
//			function circle(){
//				angle+=5;
//				
//				var x = x1+200*Math.cos(angle/180*Math.PI);
//				var y = y1+200*Math.sin(angle/180*Math.PI);
//				
//				box.style.left = x-50+"px";
//				box.style.top = y-50+"px";
//				
//				requestAnimationFrame(circle);
//			}
//			
//			requestAnimationFrame(circle);
//			
//		}
		
		var dots = document.querySelectorAll(".dot");
		var x1 = window.document.documentElement.clientWidth/2;
		var y1 = window.document.documentElement.clientHeight/2;
		var r = 150;
		
		function move(){
			var angle = 0;
			function circle(){
				angle+=5;
				if(angle>=360){
					angle = 0;
				}
				
				for (var i = 0;i<dots.length;i++) {
					var ang = angle+i*(360/dots.length);
					var x = x1+200*Math.cos(ang/180*Math.PI);
					var y = y1+200*Math.sin(ang/180*Math.PI);
					
					dots[i].style.left = x-25+"px";
					dots[i].style.top = y-25+"px";
					dots[i].style.backgroundColor = "hsl("+ang+",100%,50%)";
				}
				
				
				requestAnimationFrame(circle);
			}
			
			requestAnimationFrame(circle);
			
		}
		
		
		
		
		
		
	</script>
	
	
	
</html>
